前端面试：前端性能优化

在这个内卷时代，前端面试几乎都逃不出性能优化这个点。前端优化大概可以有以下几个方向：

网络优化

页面渲染优化

JS优化

图片优化

webpack打包优化

React优化

Vue优化

link标签的rel属性设置dns-prefetch，提前获取域名对应的IP地址

减轻服务端压力，快速得到数据(强缓存和协商缓存可以看这里)

用户与服务器的物理距离对响应时间也有影响。

内容分发网络（CDN）是一组分散在不同地理位置的 web 服务器，用来给用户更高效地发送内容。典型地，选择用来发送内容的服务器是基于网络距离的衡量标准的。例如：选跳数（hop）最少的或者响应时间最快的服务器。

压缩组件通过减少 HTTP 请求产生的响应包的大小，从而降低传输时间的方式来提高性能。从 HTTP1.1 开始，Web 客户端可以通过 HTTP 请求中的 Accept-Encoding 头来标识对压缩的支持（这个请求头会列出一系列的压缩方法）

如果 Web 服务器看到请求中的这个头，就会使用客户端列出的方法中的一种来压缩响应。Web 服务器通过响应中的 Content-Encoding 头来告知 Web 客户端使用哪种方法进行的压缩

目前许多网站通常会压缩 HTML 文档，脚本和样式表的压缩也是值得的（包括 XML 和 JSON 在内的任何文本响应理论上都值得被压缩）。但是，图片和 PDF 文件不应该被压缩，因为它们本来已经被压缩了。

Chrome 等现代化浏览器，都会有同域名限制并发下载数的情况，不同的浏览器及版本都不一样，使用不同的域名可以最大化下载线程，但注意保持在 2~4 个域名内，以避免 DNS 查询损耗。

虽然 src 属性为空字符串，但浏览器仍然会向服务器发起一个 HTTP 请求：

IE 向页面所在的目录发送请求；Safari、Chrome、Firefox 向页面本身发送请求；Opera 不执行任何操作。

Webkit 渲染引擎流程：

处理 HTML 并构建 DOM 树

处理 CSS 构建 CSS 规则树(CSSOM)

DOM Tree 和 CSSOM Tree 合成一棵渲染树 Render Tree。

根据渲染树来布局，计算每个节点的位置

调用 GPU 绘制，合成图层，显示在屏幕上

css影响renderTree的构建，会阻塞页面的渲染，因此应该尽早（将 CSS 放在 head 标签里）和尽快（启用 CDN 实现静态资源加载速度的优化)的将css资源加载

浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。

减少嵌套：最多不要超过三层，并且后代选择器的开销较高，慎重使用

避免使用通配符，对用到的元素进行匹配即可

利用继承，避免重复匹配和定义

正确使用类选择器和id选择器

css 表达式会被频繁地计算。

js可以修改CSSOM和DOM，因此js会阻塞页面的解析和渲染，并且会等待css资源的加载。也就是说js会抢走渲染引擎的控制权。所以我们需要给js资源添加defer或者async，延迟js脚本的执行。

在现实环境中使用外部文件通常会产生较快的页面，因为 JavaScript 和 CSS 有机会被浏览器缓存起来。对于内联的情况，由于 HTML 文档通常不会被配置为可以进行缓存的，所以每次请求 HTML 文档都要下载 JavaScript 和 CSS。所以，如果 JavaScript 和 CSS 在外部文件中，浏览器可以缓存它们，HTML 文档的大小会被减少而不必增加 HTTP 请求数量。

图片会增加网络请求次数，从而拖慢页面加载时间

iconfont可以很好的缩放并且不会添加额外的请求

使用骨架屏或者动画优化用户体验

资源按需加载，首页不需要的资源延迟加载

增加多个节点使用documentFragment：不是真实dom的部分，不会引起重绘和回流

用 translate 代替 top ，因为 top 会触发回流，但是translate不会。所以translate会比top节省了一个layout的时间

使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）；opacity 代替 visiability，visiability会触发重绘（paint），但opacity不会。

把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改 100 次，然后再把它显示出来

不要把 DOM 结点的属性值放在一个循环里当成循环里的变量